<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
    <link rel="icon" type="image/png" href="/static/image/logo.png">
    <title>
        详情
    </title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
    <!-- Nucleo Icons -->
    <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
    <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
    <!-- Font Awesome Icons -->
    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
    <!-- CSS Files -->
    <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
    <link rel="stylesheet" type="text/css" href="/static/my_icon/iconfont.css">
    <style>
        [v-cloak] {
            display: none
        }

        .w-e-text-container {
            height: auto !important;
        }

        #comment {
            background-color: tomato;
        }

        .el-scrollbar {
            height: 100%;
        }

        .el-scrollbar__wrap {
            overflow: scroll;
            width: 106%;
            height: 106%;
        }
    </style>
</head>

<body class="g-sidenav-show bg-gray-200">
    {% verbatim myblock %}
    <div id="app" v-cloak>
        <!-- 侧边栏 -->
        <aside
            class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark"
            id="sidenav-main">
            <div class="sidenav-header">
                <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
                    aria-hidden="true" id="iconSidenav"></i>
                <a class="navbar-brand m-0" href="#" v-if="nick_name === '_'">
                    <img src="/static/image/logo.png" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">Black White Site</span>
                </a>
                <a class="navbar-brand m-0" href="/pages/personalPage.html" v-if="nick_name !== '_'">
                    <img :src="user_avatar" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">您好 {{ nick_name}}</span>
                </a>
            </div>
            <hr class="horizontal light mt-0 mb-2">
            <div class="collapse navbar-collapse  w-auto  max-height-vh-100" id="sidenav-collapse-main">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-white bg-gradient-primary" href="#" onclick="toggleSidenav()"
                            style="background: black !important;">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">close</i>
                            </div>
                            <span class="nav-link-text ms-1">关闭侧边栏</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/pages/homePage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">home</i>
                            </div>
                            <span class="nav-link-text ms-1">社区·圈子</span>
                        </a>
                    </li>

                    <li class="nav-item mt-3">
                        <h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">My Space
                        </h6>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="/pages/personalPage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">person</i>
                            </div>
                            <span class="nav-link-text ms-1">我的主页</span>
                        </a>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white" href="/pages/editorBywang.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="fa fa-bandcamp" aria-hidden="true"></i>
                            </div>
                            <span class="nav-link-text ms-1">新建文章</span>
                        </a>
                    </li>
                    <li class="nav-item" id="login_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-in.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">login</i>
                            </div>
                            <span class="nav-link-text ms-1">登录</span>
                        </a>
                    </li>
                    <li class="nav-item" id="register_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-up.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">assignment</i>
                            </div>
                            <span class="nav-link-text ms-1">注册</span>
                        </a>
                    </li>
                    <li class="nav-item" id="logout_aside" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="#" @click="logout">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <!-- <i class="material-icons opacity-10">assignment</i> -->
                                <i class="ni ni-user-run"></i>
                            </div>
                            <span class="nav-link-text ms-1">退出登录</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidenav-footer position-absolute w-100 bottom-0 ">
                <div class="mx-3">

                </div>
            </div>
        </aside>
        <!-- 显示区 -->
        <div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
            <!-- Navbar 头部 -->
            <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
                navbar-scroll="true">
                <div class="container-fluid py-1 px-3">
                    <!-- 头部左侧 -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark"
                                    href="javascript:;">Pages</a></li>
                            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">查看文章</li>
                        </ol>
                        <h6 class="font-weight-bolder mb-0">Show Page</h6>
                    </nav>
                    <!-- 头部右侧 -->
                    <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline">
                                <label class="form-label">Type here search</label>
                                <input type="text" class="form-control" disabled>
                            </div>
                        </div>
                        <ul class="navbar-nav  justify-content-end" id="right_ul">
                            <li class="nav-item d-flex align-items-center">
                                <a href="/pages/sign-in.html" class="nav-link text-body font-weight-bold px-0"
                                    v-if="nick_name === '_'">
                                    <i class="fa fa-user me-sm-1"></i>
                                    <span class="d-sm-inline d-none">登录/注册</span>
                                </a>
                            </li>
                            <!-- 侧边栏显示与否 -->
                            <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                                    <div class="sidenav-toggler-inner">
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item px-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0">
                                    <!-- 展示关键 fixed-plugin-button-nav -->
                                    <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                                </a>
                            </li>
                            <li class="nav-item dropdown pe-2 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-bell cursor-pointer"></i>
                                </a>
                                <ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4"
                                    aria-labelledby="dropdownMenuButton">
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/team-2.jpg"
                                                        class="avatar avatar-sm  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New message</span> from Laur
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        13 minutes ago
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/small-logos/logo-spotify.svg"
                                                        class="avatar avatar-sm bg-gradient-dark  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New album</span> by Travis Scott
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        1 day
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->

            <!-- 正式内容开始 -->
            <div class="row" v-loading="loading" style="width: 100%; margin: 0;">
                <div class="container-fluid px-2 px-md-4 col-md-10" id="content_area">
                    <!-- 头部图像 -->
                    <div class="page-header min-height-300 border-radius-xl mt-4"
                        style="background-image: url('/static/image/header.gif');">
                        <span class="mask  opacity-6"></span>
                    </div>
                    <!-- 标题 -->
                    <div class="card card-body mx-3 mx-md-4 mt-n6" style="z-index: 2;">
                        <h3 style="word-wrap: break-word;">{{article_title}}</h3>
                    </div>
                    <!-- 内容 -->
                    <div class="card card-body mx-3 mx-md-4 mt-n2" style="z-index: 1;">
                        <div class="editor" id="editor"
                            style="border: double 2px darkgrey; margin-right: auto; margin-left: auto; width: 100%;">
                            <div id="text-container" class="text" style="height: initial;"></div>
                        </div>
                    </div>
                    <!-- 评论相关 -->
                    <div class="page-header min-height-300 border-radius-xl mt-4 mt-n6"
                        style="z-index: 0; background-image: url('/static/image/comment_bg.jpg'); flex-direction: column !important;">
                        <div class="grid-content bg-purple" style="text-align: center; margin-top: 80px; margin-right: 30px; margin-left: auto;">
                            <el-button type="primary" icon="el-icon-dianzan" circle
                                size="large" class="mini_button"
                                style="font-size: large; background-color: whitesmoke;" v-if="token !== 'no' && agree_article_status === 'no'"
                                @click="agreeArticleBtn">
                            </el-button>
                            <el-button type="primary" icon="el-icon-dianzan" circle
                                size="large" class="mini_button"
                                style="font-size: large; background-color: #6bc718;" v-if="token !== 'no' && agree_article_status !== 'no'"
                                @click="agreeArticleBtn">
                            </el-button>
                            <el-button type="primary" icon="el-icon-star-on" circle
                                size="large" class="mini_button"
                                style="font-size: large;" v-if="token !== 'no'">
                            </el-button>
                            <el-button type="primary" icon="el-icon-more" circle
                                size="large" class="mini_button"
                                style=" margin-right: 20px;  font-size: large;"
                                v-if="token !== 'no'"></el-button>
                        </div>
                        <!-- <span class="mask  opacity-6"></span> -->
                        <div class="show_to" id="one" style="width: 90%;margin-top: 10px;margin-bottom: 20px;">
                            <el-row v-if="token !== 'no'">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple">
                                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :rows="2"
                                            maxlength="500" show-word-limit placeholder="请用文字表达你的奇思妙想" v-model="comment"
                                            id="comment_" style="box-shadow: 10px 10px 20px darkslategrey;">
                                        </el-input>
                                    </div>
                                    <div class="grid-content bg-purple" style="text-align: center; margin-top: 10px; ">
                                        <el-button @click="comment_complete" type="success" id="comment_button"
                                            style="width: 120px; box-shadow: 10px 10px 20px darkslategrey; margin-top: 20px;">
                                            评论
                                        </el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="grid-content bg-purple" style="text-align: center;margin-bottom: 10px;"
                            v-if="token === 'no'">
                            <el-button @click="gotoLogin" type="info" id="comment_button_to_login">登录后可评论</el-button>
                        </div>
                        <!-- 评论展示区域 -->
                        <div id="comment"
                            style="height: 600px; width: 90%; min-width: 350px !important; background: rgba(255,255,255,0.1); margin-left: auto; margin-right: auto;display: flex; flex-direction: column;"
                            class="border-radius-xl">
                            <el-empty description="暂无评论 快来坐沙发吧~" v-if="commentList.length <= 0"></el-empty>
                            <!-- 这里应该是个列表 -->
                            <el-scrollbar>
                                <ul class="list-group" style="background: none; padding-right: 40px; margin-bottom: 40px;" v-infinite-scroll="loadCommentMore"
                                    infinite-scroll-delay="500" v-loading="loading_comment">
                                    <li class="list-group-item border-0 d-flex p-4 mb-2  border-radius-lg"
                                        v-for="(comment_item, i) in commentList"
                                        style="background: rgba(255,255,255,0.1);">
                                        <el-row style="width: 100%; border-radius: 5px; ">
                                            <el-col :span="2">
                                                <div class="grid-content bg-purple"
                                                    style="text-align: center; margin-top: 20px;">
                                                    <el-avatar :size="50" :src="comment_item.user_image"></el-avatar>
                                                </div>
                                            </el-col>
                                            <el-col :span="22">
                                                <div class="grid-content bg-purple">
                                                    <el-row class="comment_head">
                                                        <el-col :span="24">
                                                            <div class="grid-content bg-purple">
                                                                {{ comment_item.nick_name }}
                                                                <el-tag size="mini" effect="dark" type="danger">{{
                                                                    comment_item.rule
                                                                    }}</el-tag>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row>
                                                        <el-col :span="24">
                                                            <div class="grid-content bg-purple" style="font-size: 14px; font-weight: 600;text-indent:25px; margin-right: 20px; word-wrap: break-word; color: rgb(8 6 10 / 72%); border-left: solid;
                                                            padding-bottom: 10px;
                                                            padding-top: 10px;
                                                            background-color: #ff7f506b;
                                                            box-shadow: 10px 10px 10px #8888;">
                                                                {{ comment_item.content }}
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row v-if="comment_item.level != '1'">
                                                        <el-col :span="23" :offset="1">
                                                            <div id="reply"
                                                                style="margin-right: 20px; border-left: solid; margin-top: 10px">
                                                                <el-row
                                                                    style="background: #827d7d5e; border-radius: 5px; margin-bottom: 15px; margin-left: -3px;"
                                                                    class="show_to">
                                                                    <el-col :span="24">
                                                                        <div class="grid-content bg-purple"
                                                                            style="line-height: 20px; letter-spacing: initial; margin-left: 10px; font-size: 13px; color: #167ee8; padding-top: 20px; padding-bottom: 20px; word-wrap: break-word; box-shadow: 10px 10px 5px #8888">
                                                                            <span>@ {{ comment_item.reply.nick_name
                                                                                }}:</span>
                                                                            <span
                                                                                style="color: rgb(87 103 119);">&nbsp;&nbsp;&nbsp;{{comment_item.reply.content
                                                                                }}</span>
                                                                        </div>
                                                                    </el-col>
                                                                </el-row>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row
                                                        style="font-size: 10px; line-height: 36px; letter-spacing: 1px; margin-bottom: 0;padding-top: 10px;">
                                                        <el-col :span="6">
                                                            <div class="grid-content bg-purple">{{ comment_item.add_time
                                                                }}
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12" :offset="6">
                                                            <div class="grid-content bg-purple"
                                                                style="text-align: right;">
                                                                <el-button type="primary" icon="el-icon-star-on" circle
                                                                    size="large" class="mini_button"
                                                                    style="padding: 5px;" v-if="token !== 'no'" hidden>
                                                                </el-button>
                                                                <el-button type="primary" icon="el-icon-chat-dot-square"
                                                                    circle size="large" class="mini_button"
                                                                    style="padding: 5px;"
                                                                    @click="comment_reply(comment_item.cid, comment_item.nick_name);goAnchor('#one')"
                                                                    v-if="token !== 'no'"></el-button>
                                                                <el-button type="primary" icon="el-icon-more" circle
                                                                    size="large" class="mini_button"
                                                                    style="padding: 5px; margin-right: 20px;"
                                                                    v-if="token !== 'no'"></el-button>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </li>
                                    <el-divider content-position="center" v-if="next !== null && commentList.length > 0"
                                        @click="loadCommentMore">下滑或点击加载更多</el-divider>
                                    <el-divider content-position="center"
                                        v-if="next === null && commentList.length > 0">我是有底线的</el-divider>
                                </ul>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
                <div class="col-md-2" id="content_area_nav">
                    <nav id="navbar-title"
                        class="navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-6 fixed-end ms-3" style="overflow: hidden; margin-right: 20px;">
                        <h3 class="navbar-brand" href="#">文章索引</h3>
                        <el-scrollbar></el-scrollbar>
                    </nav>
                </div>
            </div>
            <!-- 正式内容结束 -->
            <!-- 页脚开始 -->
            <footer class="footer py-4  ">
                <div class="container-fluid">
                    <div class="row align-items-center justify-content-lg-between">
                        <div class="col-lg-6 mb-lg-0 mb-4">
                            <div class="copyright text-center text-sm text-muted text-lg-start">
                                ©
                                <script>
                                    document.write(new Date().getFullYear())
                                </script>,
                                made with <i class="fa fa-heart"></i> by
                                <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Creative
                                    Tim</a>
                                for a better web.
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com" class="nav-link text-muted"
                                        target="_blank">Creative Tim</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted"
                                        target="_blank">About Us</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/blog" class="nav-link text-muted"
                                        target="_blank">Blog</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted"
                                        target="_blank">License</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- 页脚结束 -->
        </div>
        <!-- 主题样式内容开始 -->
        <div class="fixed-plugin">
            <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
                <i class="material-icons py-2">settings</i>
            </a>
            <div class="card shadow-lg">
                <div class="card-header pb-0 pt-3">
                    <div class="float-start">
                        <h5 class="mt-3 mb-0">嗨喽~</h5>
                        <p>配置你想要的主题.</p>
                    </div>
                    <div class="float-end mt-4">
                        <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
                            <i class="material-icons">clear</i>
                        </button>
                    </div>
                    <!-- End Toggle Button -->
                </div>
                <hr class="horizontal dark my-1">
                <div class="card-body pt-sm-3 pt-0">
                    <!-- Sidebar Backgrounds -->
                    <div>
                        <h6 class="mb-0">侧边栏聚焦</h6>
                    </div>
                    <a href="javascript:void(0)" class="switch-trigger background-color">
                        <div class="badge-colors my-2 text-start">
                            <span class="badge filter bg-gradient-primary active" data-color="primary"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-dark" data-color="dark"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-info" data-color="info"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-success" data-color="success"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-warning" data-color="warning"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-danger" data-color="danger"
                                onclick="sidebarColor(this)"></span>
                        </div>
                    </a>
                    <!-- Sidenav Type -->
                    <div class="mt-3">
                        <h6 class="mb-0">侧边栏样式</h6>
                        <p class="text-sm">选择想要的侧边栏样式</p>
                    </div>
                    <div class="d-flex">
                        <button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark"
                            onclick="sidebarType(this)">暗黑</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent"
                            onclick="sidebarType(this)">透明</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white"
                            onclick="sidebarType(this)">白亮</button>
                    </div>
                    <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
                    <!-- Navbar Fixed -->
                    <div class="mt-3 d-flex">
                        <h6 class="mb-0">导航栏固定</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed"
                                onclick="navbarFixed(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-3">
                    <div class="mt-2 d-flex">
                        <h6 class="mb-0">全局主题[白/黑]</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version"
                                onclick="darkMode(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-sm-4">
                    <a class="btn btn-outline-dark w-100" href="">completed welcome blackwhitesite</a>
                </div>
            </div>
        </div>

        <!-- 主题样式内容结束 -->
    </div>
    {% endverbatim myblock %}
    <!--   Core JS Files   -->
    <script src="/static/assets/js/core/popper.min.js"></script>
    <script src="/static/assets/js/core/bootstrap.min.js"></script>
    <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
    <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>

    <script src="/static/assets/js/my/jquery.js"></script>
    <script src="/static/assets/js/my/vue.min.js"></script>
    <script src="/static/assets/js/my/vue-router.js"></script>
    <script src="/static/assets/js/my/ele.index.js"></script>
    <script src="/static/assets/js/my/wangEditor.js"></script>
    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <script src="/static/js/autoBuildTree.js"></script>
    <script src="/static/js/ping.js"></script>
    <script src="/static/js/clickEmoji.js"></script>
    <script src="/static/js/cookieUtil.js"></script>


    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        };
        window.onresize = function () {
            //浏览器窗口的内部宽度（包括滚动条）
            var Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            //浏览器窗口的内部高度（包括滚动条）
            var Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
            if (Width < 1800) {
                document.getElementById("content_area").classList.remove("col-md-10");
                document.getElementById("content_area").classList.add("col-md-12");
                document.getElementById("content_area_nav").setAttribute('hidden', true);
            } else {
                document.getElementById("content_area").classList.remove("col-md-12");
                document.getElementById("content_area").classList.add("col-md-10");
                document.getElementById("content_area_nav").classList.add("col-md-2");
                document.getElementById("content_area_nav").removeAttribute('hidden');
            }
        }
    </script>
    <!-- Github buttons -->
    <!-- <script async defer src="https://buttons.github.io/buttons.js"></script>
  Control Center for Material Dashboard: parallax effects, scripts for the example pages etc
  <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script> -->

    <script>
        new Vue({
            el: '#app',
            data: {
                click_article: "最新",
                nick_name: localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name"),
                user_avatar: localStorage.getItem("avatar") === null ? '_' : localStorage.getItem("avatar"),
                clientHeight: "",
                content: "",
                add_time: "",
                nick_name: "",
                article_title: "",
                loading: true,
                loading_comment: true,
                refer: localStorage.getItem('refer'),
                commentList: [],
                token: localStorage.getItem('token') !== null ? localStorage.getItem('token') : "no",
                comment: "",
                reply_user: "",
                reply_cid: "",
                next: null,
                editor: null,
                aid: "",
                agree_article_status: 'no'
            },
            created() {
                // 加载文章
                // let aid = {{ pk|safe }};
                // 从本地缓存中获取
                let regexp1 = /.*p=([^#]*)#?/
                this.aid = document.location.href.match(regexp1)[1] || undefined;
                // this.init_article();
                this.loading = true;
                if (this.aid === null || this.aid === undefined) {
                    this.$alert('没有这篇文章', '警告', {
                        confirmButtonText: '确定',
                        callback: action => {
                            document.location.href = '/pages/homePage.html/'
                        }
                    })
                    return
                }
                const checkMyself = localStorage.getItem('checkMyself');
                let url;
                let regexp = /.*csrftoken=([^;.]*).*$/;
                let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                let regexp_token = /.*jwtToken=([^;.]*).*$/;
                let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                if (checkMyself === '0' || checkMyself === null) {
                    url = `/apiArticle/articles/?pk=${this.aid}`;
                } else {
                    url = `/apiArticle/myArticles/?pk=${this.aid}`;
                }
                fetch(url, {
                    method: 'GET',
                    headers: {
                        'token': token,
                        'X-CSRFToken': xCSRF
                    }
                })
                    .then(resp => resp.json())
                    .then(json => {
                        if (json.code !== 200) {
                            this.$message({
                                message: json.message,
                                type: 'warning'
                            });
                        } else if (json.data.results.length === 0) {
                            this.$message({
                                message: `暂无对应文章`,
                                type: 'warning'
                            });
                        } else {
                            if (json.data.results.length === 0) {
                                this.$message({
                                    message: `没有该文章`,
                                    type: 'warning'
                                });
                                return
                            }
                            this.content = json.data.results[0].text;
                            this.article_title = json.data.results[0].title;
                            // this.nick_name = json.data.results[0].nick_name;
                            this.add_time = json.data.results[0].add_time;
                            let self = this;
                            this.init_editor(self.content);
                            if (json.data.results[0].is_check === 0) {
                                this.$message({
                                    message: `该文章处于审核阶段 不开放评论区的相关功能 请谅解`,
                                    type: 'warning'
                                });
                                return
                            }
                            setTimeout(function () {
                                self.get_simple_comment();
                            }, 300)
                        }
                    })
            },
            mounted() {
                // 动态禁用元素呗
                this.change_sign_status();
                //浏览器窗口的内部宽度（包括滚动条）
                var Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                //浏览器窗口的内部高度（包括滚动条）
                var Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
                if (Width < 1800) {
                    document.getElementById("content_area").classList.remove("col-md-10");
                    document.getElementById("content_area").classList.add("col-md-12");
                    document.getElementById("content_area_nav").setAttribute('hidden', true);
                } else {
                    document.getElementById("content_area").classList.remove("col-md-12");
                    document.getElementById("content_area").classList.add("col-md-10");
                    document.getElementById("content_area_nav").classList.add("col-md-2");
                    document.getElementById("content_area_nav").removeAttribute('hidden');
                }

            },
            watch: {
            },
            methods: {
                loadCommentMore() {
                    if (this.next !== null) {
                        this.true_comment(this.next, 'append');
                    }
                },
                gotoLogin() {
                    localStorage.setItem('refer', document.location.href);
                    document.location.href = '/pages/sign-in.html/'
                },
                loadMore() {
                    let button = document.getElementById('more');
                    button.disabled = true;
                    const url = this.next;
                    this.true_comment(url, 'append');
                },
                change_sign_status() {
                    this.nick_name = localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name");
                    let self = this;
                    setTimeout(function () {
                        self.loading = false;
                    }, 300)
                },
                logout() {
                    localStorage.removeItem('token');
                    localStorage.removeItem('nick_name');
                    window.clearCookie("jwtToken");
                    this.change_sign_status();
                },
                init_editor(html_) {
                    const E = window.wangEditor;
                    const editor = new E("#text-container");
                    //editor.config.height = 500;
                    editor.config.placeholder = '分享现在的想法';
                    // 配置默认的alert
                    editor.config.customAlert = function (s, t) {
                        switch (t) {
                            case 'success':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'success'
                                });
                                break
                            case 'info':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'warning'
                                });
                                break
                            case 'warning':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'warning'
                                });
                                break
                            case 'error':
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'error'
                                });
                                break
                            default:
                                Vue.prototype.$message({
                                    message: s,
                                    type: 'success'
                                });
                                break
                        }
                    };
                    // 默认情况下，只有 IE 和 旧版 Edge 会使用兼容模式，如果需要在其它浏览器上也使用兼容模式，可以在函数内进行判定
                    editor.config.compatibleMode = function () {
                        // 返回 true 表示使用兼容模式；返回 false 使用标准模式
                        return true
                    }
                    // 当我们使用兼容模式的时候，可以自定义记录的频率，默认 200 ms
                    //editor.config.onchangeTimeout = 3000 // 修改为3s
                    // 配置 onchange 回调函数
                    //editor.config.onchange = function (newHtml) {
                    //    console.log("change 之后最新的 html", newHtml);
                    //    localStorage.setItem('wangeditor', JSON.stringify(editor.txt.getJSON()))
                    //    Vue.prototype.$message({
                    //        message: "自动保存成功",
                    //        type: 'success'
                    //    });
                    //};
                    // 设置index
                    editor.config.zIndex = 0;
                    // 还可以修改历史记录的步数。默认 30 步
                    editor.config.historyMaxSize = 50 // 修改为 50 步
                    // 配置菜单栏，设置不需要的菜单
                    editor.config.excludeMenus = [
                        'video'
                    ]
                    // 挂载highlight插件 代码高亮
                    editor.highlight = hljs
                    // 配置tab长度
                    editor.config.languageTab = '    '
                    // 获取所有标题
                    editor.config.onCatalogChange = function (headList) {

                    };
                    // 自定义检查插入的链接
                    editor.config.linkCheck = function (text, link) {
                        // 以下情况，请三选一 返回 true验证成功 返回字符串验证失败 提示信息 返回undefined说明检查未通过，编辑器会阻止链接插入。
                        let text_rule = /^[\u4e00-\u9fa5a-zA-Z0-9.]{2,100}$/;
                        let text_ = text.match(text_rule) === null ? null : text.match(text_rule)[0]
                        let link_rule = /^(https?:\/\/[^\s]{2,100})$/;
                        let link_ = link.match(link_rule) === null ? null : link.match(link_rule)[0]
                        if (text_ === null) {
                            return '链接名格式错误 只能有数字、字母、下划线、汉字及少量特殊字符哦'
                        } else if (link_ === null) {
                            return '请输入正确且完整的链接'
                        } else {
                            return true
                        }
                    };
                    // 后面两个参数是可选参数
                    editor.config.linkImgCheck = function (imgSrc, alt, href) {
                        // 以下情况，请三选一 返回 true验证成功 返回字符串验证失败 提示信息 返回undefined说明检查未通过，编辑器会阻止链接插入。
                        let link_rule = /^(https?:\/\/[^\s]{2,100})$/;
                        let link_ = imgSrc.match(link_rule) === null ? null : imgSrc.match(link_rule)[0]
                        if (link_ === null) {
                            return '请输入正确且完整的链接'
                        } else {
                            return true
                        }
                    }
                    // 粘贴过滤 忽略图片
                    editor.config.pasteIgnoreImg = true
                    // 配置粘贴文本的内容处理
                    editor.config.pasteTextHandle = function (pasteStr) {
                        // 对粘贴的文本进行处理，然后返回处理后的结果
                        return pasteStr + '【来自粘贴内容】'
                    };
                    // 配置 server 接口地址
                    editor.config.uploadImgServer = '/apiArticle/fileImage/'
                    // 设置上传名
                    editor.config.uploadFileName = 'upload';
                    // 设置图片大小限制
                    editor.config.uploadImgMaxSize = 5 * 1024 * 1024 // 5M
                    // 设置一次上传多少张
                    editor.config.uploadImgMaxLength = 1
                    // 设置上传的headers
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1]
                    editor.config.uploadImgHeaders = {
                        'token': localStorage.getItem('token'),
                        'X-CSRFToken': xCSRF
                    };
                    // 设置图片超时时间 单位ms 默认10s
                    editor.config.uploadImgTimeout = 1000 * 60
                    // 设置图片类型限制
                    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
                    // 上传回调
                    editor.config.uploadImgHooks = {
                        // 上传图片之前
                        before: function (xhr) {
                            //console.log(xhr)
                            // 可阻止图片上传
                            //return {
                            //    prevent: true,
                            //    msg: '需要提示给用户的错误信息'
                            //}
                        },
                        // 图片上传并返回了结果，图片插入已成功
                        success: function (xhr) {
                        },
                        // 图片上传并返回了结果，但图片插入时出错了
                        fail: function (xhr, editor, resData) {
                        },
                        // 上传图片出错，一般为 http 请求的错误
                        error: function (xhr, editor, resData) {
                        },
                        // 上传图片超时
                        timeout: function (xhr) {
                        },
                        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                        customInsert: function (insertImgFn, result) {
                            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                            insertImgFn(result.data["url"])
                        }
                    }
                    // 设置菜单栏
                    editor.config.menus = [
                    ];
                    editor.create();
                    // 设置内容
                    editor.txt.setJSON(JSON.parse(html_)) // 重新设置编辑器内容
                    editor.disable()
                    var imgs = document.getElementsByTagName("img");
                    // console.log(imgs.length, imgs)
                    for (var j = 0; j < imgs.length; j++) {
                        var b = imgs[j];
                        if (b.classList.contains("emoji")) {
                            continue
                        }
                        b.classList.add("pic");
                        b.setAttribute('alt', "加载失败");
                        b.setAttribute('title', "点击查看原图");
                    }
                    $(".pic").click(function () {
                        var _this = $(this);//将当前的pimg元素作为_this传入函数
                        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
                    });
                    window.editor = editor;
                    this.loading = true;
                    let self = this;
                    setTimeout(function () {
                        document.getElementsByClassName("w-e-text")[0].innerHTML = "";
                        document.getElementsByClassName("w-e-content-mantle")[0].innerHTML = document.getElementsByClassName("w-e-content-mantle")[0].innerHTML.replaceAll("&amp;quot;", "&quot;");
                        window.showArticleIndexTree("#editor", ".el-scrollbar__view", 1);
                        self.loading = false;
                    }, 300)
                },
                // 给文章点赞
                agreeArticleBtn() {
                    this.loading = true;
                    if (this.aid === null || this.aid === undefined) {
                        this.$alert('没有相关内容', '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                document.location.href = this.refer || '/pages/homePage.html/'
                            }
                        })
                        return
                    }
                    const url = `/apiArticle/agreeArticle/?aid=${this.aid}`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                    .then(resp => resp.json())
                    .then(json => {
                        if (json.code !== 200) {
                            this.$message({
                                message: json.message,
                                type: 'warning'
                            });
                            this.loading = false;
                        } else {
                            this.$message({
                                message: json.message,
                                type: 'success'
                            });
                            if (json.message === "点赞成功") {
                                this.agree_article_status = 'yes'
                            }else{
                                this.agree_article_status = 'no'
                            }
                            this.loading = false;
                        }
                    })
                },
                get_simple_comment() {
                    // let aid = localStorage.getItem('view_aid')
                    if (this.aid === null || this.aid === undefined) {
                        this.$alert('没有相关内容', '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                                document.location.href = '/pages/homePage.html/'
                            }
                        })
                        return
                    }
                    const url = `/apiArticle/comments/?aid=${this.aid}`;
                    this.true_comment(url, 'append');
                },
                comment_reply(cid, user) {
                    this.reply_cid = cid;
                    this.reply_user = user;
                    // 这里应该显示placeHolder
                    this.comment = `@${this.reply_user}:`
                    // 聚焦textarea
                    document.getElementById("comment_").focus();
                },
                // 回到
                goAnchor(selector) {
                    this.$el.querySelector(selector).scrollIntoView();
                },
                comment_complete() {
                    this.loading = true;
                    let button = document.getElementById('comment_button');
                    button.disabled = true;
                    let content = this.comment;
                    // let aid = localStorage.getItem('view_aid')
                    if (this.aid === null || this.aid === undefined) {
                        this.$alert('没有这篇文章', '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                                document.location.href = '/pages/homePage.html/'
                            }
                        })
                        return
                    }
                    const url = `/apiArticle/comments/`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    let cid = undefined;
                    if (this.comment.length < 1) {
                        this.$message({
                            message: `请先输入内容`,
                            type: 'warning'
                        });
                        button.disabled = false;
                        this.loading = false;
                        return
                    }
                    if (this.comment.indexOf(`@${this.reply_user}:`) === 0) {
                        cid = this.reply_cid;  // 获取回复cid
                        content = this.comment.slice(`@${this.reply_user}:`.length);  // 切割评论
                    }
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token,
                            'X-CSRFToken': xCSRF
                        },
                        body: `content=${encodeURIComponent(content)}&aid=${encodeURIComponent(this.aid)}&cid=${cid}`,
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                });
                                button.disabled = false;
                                if (json.message.indexOf('校验失败') === 0) {
                                    this.$confirm(`${json.message}`, '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                        type: 'warning'
                                    }).then(() => {
                                        localStorage.setItem('refer', document.location.href);
                                        document.location.href = '/pages/sign-in.html/';
                                    }).catch(() => {
                                        this.goBack();
                                    });
                                }
                                this.loading = false;
                            } else {
                                this.$message({
                                    message: json.message,
                                    type: 'success'
                                });
                                this.commentList = [json.data].concat(this.commentList);
                                this.comment = "";
                                button.disabled = false;
                                this.loading = false;
                            }
                        })
                },
                true_comment(url, mode) {
                    this.loading_comment = true;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                });
                            } else {
                                if (mode === 'append') {
                                    this.commentList = this.commentList.concat(json.data.results);
                                    this.next = json.data.next;
                                } else {
                                    this.commentList = json.data.results.slice(0, 1).concat(this.commentList);
                                }

                            };
                            this.loading_comment = false;
                        })
                }
            }
        })
    </script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>
    <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>

</body>

</html>